Vue.component('comp-content', {
    template: '\
		<div> \
            <label>{{ value.index }}.{{ value.question }}</label><br> \
            <div v-if="value.type === 1" class="radio"> \
                <template v-for="(item,indexI) in value.vals"> \
                    <input type="radio" :name="getFlag" :value="item.value" @click="checkThis()"> \
                    {{ item.value }} \
                </template> \
            </div> \
            <div v-if="value.type === 2"> \
                <template v-for="(item,indexI) in value.vals"> \
                    <div class="checkbox"> \
                        <input type="checkbox" :name="getFlag" :value="item.value" @click="checkThis()"> \
                        {{ item.value }} \
                    </div> \
                </template> \
            </div> \
            <div v-if="value.type === 3"> \
                <textarea :id="getFlag" class="textarea" placeholder="不少于100字" @keyup="inputText()"></textarea> \
            </div> \
        </div>',
    props: {
        'value': {
            type: Object
        },
        'page': {
            type: Number
        }
    },
    data: function () {
        return {
            checkNum: 0,
            textNum: 0
        };
    },
    computed: {
        getFlag: function () {
            return "content-" + this.value.index;
        }
    },
    methods: {
        checkThis: function () {
            this.checkNum = 0;
            console.log("勾选了");
            var elements = document.getElementsByName(this.getFlag);
            var _this = this;
            elements.forEach(function (val, index) {
                if (val.checked) {
                    _this.checkNum += 1;
                }
            })
            console.log("checkNum: " + this.checkNum);
        },
        inputText: function(){
            var element = document.getElementById(this.getFlag);
            this.textNum = element.value.length;
            console.log("textNum: " + this.textNum);
        }
    },
    watch: {
        checkNum: function (val) {
            if (this.value.type === 1) {
                if (val > 0) {
                    bus.$emit('on-checkBack', { success: true, msg: '' });
                } else {
                    bus.$emit('on-checkBack', { success: false, msg: '' });
                }
            } else {
                if (val > 1) {
                    bus.$emit('on-checkBack', { success: true, msg: '' });
                } else {
                    bus.$emit('on-checkBack', { success: false, msg: '' });
                }
            }
        },
        textNum: function(val){
            if(val >= 10){
                bus.$emit('on-checkBack', { success: true, msg: '' });
            } else {
                bus.$emit('on-checkBack', { success: false, msg: '' });
            }
        }
    },
    mounted: function () {
        var _this = this;
        bus.$on('on-reset', function (msg) {
            if (msg === _this.value.index) {
                if(_this.value.type === 3){
                    var element = document.getElementById(_this.getFlag);
                    element.value = '';
                    _this.textNum = 0;
                }else{
                    var elements = document.getElementsByName(_this.getFlag);
                    elements.forEach(function (val, index) {
                        val.checked = false;
                    })
                    _this.checkNum = 0;
                }
            }
        });
        bus.$on('on-status', function (msg) {
            if (msg === _this.value.index) {
                console.log(_this.checkNum)
                bus.$emit('on-checkBack', { success: _this.checkNum > 0, msg: '' });
            }
        })
    }
})
